<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="app">
			<h1>Named Views</h1>
			<ul>
				<li>
					<router-link to="/">/</router-link>
				</li>
				<li>
					<router-link to="/other">/other</router-link>
				</li>
			</ul>
			<router-view class="view one"></router-view>
			<router-view class="view two" name="a"></router-view>
			<router-view class="view three" name="b"></router-view>
		</div>

		<script src="../js/vue.min.js"></script>
		<script src="../js/vue-router.js"></script>
		<script type="text/javascript">
			const Foo = { template: '<div>foo</div>' }
			const Bar = { template: '<div>bar</div>' }
			const Baz = { template: '<div>baz</div>' }

			const router = new VueRouter({
				mode: 'history',
				routes: [{
						path: '/',
						// a single route can define multiple named components
						// which will be rendered into <router-view>s with corresponding names.
						components: {
							default: Foo,
							a: Bar,
							b: Baz
						}
					},
					{
						path: '/other',
						components: {
							default: Baz,
							a: Bar,
							b: Foo
						}
					}
				]
			})

			new Vue({
				router,
				el: '#app'
			})
		</script>
	</body>

</html>